<template>
  <div class="box">
    <div class="header">
      <span class="iconfont icon-fanhui" @click="back()"></span>
      <div class="title">消息</div>
    </div>
    <div class="main">
        <div class="con" v-for='(item,index) in news' :key='index' @click="goNews()">
            <dl >
                <dt>
                    <img :src="item.img" alt="">
                </dt>
                <dd>
                    <p>{{item.name}}</p>
                    <span>{{item.con}}</span>
                </dd>
            </dl>
            <p>{{item.date}}</p>
        </div>
    </div>
  </div>
</template>

<script>
import "../../static/iconfont/font_g5b9ldx0nvj/iconfont.css";
export default {
  data() {
    return {
      news:[
        {
          name:'一米阳光',
          con:'您好，您发布的房子我想具体咨询一下',
          date:'上午7：00',
          img:'../../static/头像.png'
        },
        {
          name:'一米阳光',
          con:'您好，您发布的房子我想具体咨询一下',
          date:'上午7：00',
          img:'../../static/头像.png'
        },
      ]
    }
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    goNews(){
      getApp().globalData.item =this.news[1];
      uni.navigateTo({   
        url:`/pages/my/news`
      })
    }
  },
};
</script>

<style lang='scss'>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: 200rpx;
    background: linear-gradient(90deg, #0272f0, #36a2fe);
    display: flex;
    align-items: center;
    position: relative;
    top:0;
    position:sticky;
    span {
      position: absolute;
      left: 40rpx;
      top: 50%;
      transform: translate(0, -50%);
      color: #fff;
    }
    .title {
      width: 100%;
      text-align: center;
      color: #fff;
    }
  }
  .main{
      width: 100%;
      height: 235rpx;
      background: #eee;
      .con{
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          background: #fff;
          dl{
              display: flex;
              justify-content: flex-start;
              align-items: center;
              dt{
                  img{
                      width: 100rpx;
                      height: 100rpx;
                      border-radius: 50%;
                  }
              }
              dd{
                  margin-left: 20rpx;
                  p{
                      font-size: 30rpx;
                  }
                  span{
                      font-size: 30rpx;
                      color: #666666;
                  }
              }
          }
          p{
              font-size: 30rpx;
          }
      }
      .con:nth-child(2){
         margin: 10rpx 0;
      }

  }
}
</style>